<template>
  <div class="addCompent">
    <el-form  :model="couponList[0]" :rules="couponRules" ref="couponRef" class="demo-ruleForm">
      <el-table :data="couponList" border style="width: 80%" >
        <el-table-column label="选择优惠券类型" width="180" align="center">
          <template slot-scope="couponList">
            <el-select v-model="couponList.row.couponType" placeholder="请选择" @change="selectType" :disabled="disType">
              <el-option v-for="item in modelList" :key="item.id" :label="item.couponType" :value="item.id"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="优惠券规则" width="270" align="center">
          <template slot-scope="couponList">
            <div v-if="couponList.row.couponType === 0" class="ruleStyle">
              <el-form-item prop="discount">
                <el-input-number :min="0" :max="9.9" :step="0.1" :controls="false" step-strictly
                  v-model="couponList.row.discount" class="ruleStyle__firIpt" :disabled="disType"></el-input-number>
                折，无门槛使用
              </el-form-item>
            </div>
            <div v-if="couponList.row.couponType === 1" class="ruleStyle">
              <el-form-item prop="discountAmount">
                <el-input-number :min="1" :controls="false" v-model="couponList.row.discountAmount"
                  class="ruleStyle__firIpt" :disabled="disType"></el-input-number>元，无门槛使用
              </el-form-item>
            </div>
            <div v-if="couponList.row.couponType === 2" class="ruleStyle">
              满
              <el-form-item prop="conditionAmount">
                <el-input-number :min="0" :controls="false" v-model="couponList.row.conditionAmount"
                  class="ruleStyle__firIpt" :disabled="disType"></el-input-number>
              </el-form-item>元，打
              <el-form-item prop="discount">
                <el-input-number :min="0" :max="9.9" :step="0.1" :controls="false" v-model="couponList.row.discount"
                  class="ruleStyle__secIpt" style="width: 80px" :disabled="disType"></el-input-number>
              </el-form-item>折
            </div>
            <div v-if="couponList.row.couponType === 3" class="ruleStyle">
              满
              <el-form-item prop="conditionAmount">
                <el-input-number :min="0" :controls="false" v-model="couponList.row.conditionAmount"
                  class="ruleStyle__firIpt" :disabled="disType"></el-input-number>
              </el-form-item>元，减
              <el-form-item prop="discountAmount">
                <el-input-number :min="1" :controls="false" v-model="couponList.row.discountAmount"
                  class="ruleStyle__secIpt" :disabled="disType" style="width: 80px"></el-input-number>
              </el-form-item>元
            </div>
          </template>
        </el-table-column>
        <el-table-column label="发行量(张)" align="center">
          <template slot-scope="couponList">
            <el-form-item prop="issueQuantity">
              <el-input-number :min="0" :step="1" step-strictly :controls="false" v-model="couponList.row.issueQuantity"
                style="width: 80px; margin-top: 15px" :disabled="disType"></el-input-number>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="限领(张/人)" align="center">
          <template slot-scope="couponList">
            <el-form-item prop="limitQuantity">
              <el-input-number :min="0" step-strictly :step="1" :controls="false" v-model="couponList.row.limitQuantity"
                style="width: 80px; margin-top: 15px" :disabled="disType"></el-input-number>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div class="expText" v-if="showType">折扣输入有误</div>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Watch,
  Ref
} from "vue-property-decorator";
const couponList = [{
  id: 0,
  couponType: "无门槛折扣劵",
},
{
  id: 1,
  couponType: "无门槛现金劵",
},
{
  id: 2,
  couponType: "满折劵",
},
{
  id: 3,
  couponType: "满减劵",
},
];

  @Component
export default class AddcouponComp extends Vue {
    @Prop({
      type: Object,
      default () {
        return {};
      },
    })
    couponContent: any;

    @Prop({
      type: Number,
      default () {
        return 0;
      },
    })
    goodType: any;

    @Watch("couponContent")
    getCouponDetail() {
      this.getCoupon();
    }

    @Watch("goodType")
    watchGoodType(newValue) {
      console.log(newValue);
      this.setModeType();
    }

    @Ref()
    readonly couponRef: HTMLFormElement;

    /** 禁用状态 */
    disType = false;

    /** 验证状态 */
    validType = false;

    showType = false;

    couponList = [{
      couponType: 0,
      discount: "", // 优惠折扣
      discountAmount: "", // 优惠金额
      conditionAmount: "", // 满足条件金额
      issueQuantity: "", // 发行数量
      limitQuantity: "", // 限领张数
    }, ];

    /** 可选择优惠券列表 */
    modelList = couponList;

    /** 折扣验证 */
    discountValid(rule, value, callback) {
      const regs = /^\d+.?\d{0,1}$/;
      if (value > 10) {
        callback(new Error("折扣范围为0-10"));
      } else if (value <= 0) {
        callback(new Error("折扣为正数"));
      } else if (!regs.test(value)) {
        callback(new Error("保留一位小数"));
      } else {
        callback();
      }
    }

    /** 金额验证 */
    discountAmountValid(rule, value, callback) {
      const regs = /^[+]{0,1}(\d+)$/;
      if (!regs.test(value)) {
        callback(new Error("金额请输入整数"));
      } else if (value <= 0) {
        callback(new Error("金额不能小于1"));
      } else if (
        this.couponList[0].couponType === 3 &&
        Number(this.couponList[0].conditionAmount) <
        Number(this.couponList[0].discountAmount)
      ) {
        callback(new Error("优惠金额有误"));
        this.$message.error("优惠金额不能大于满足条件");
      } else {
        callback();
      }
    }

    /** 条件金额 */
    conditionAmountValid(rule, value, callback) {
      const regs = /^[+]{0,1}(\d+)$/;
      if (!regs.test(value)) {
        callback(new Error("满足金额有误"));
      } else if (value <= 0) {
        callback(new Error("金额不能小于1"));
      } else {
        callback();
      }
    }

    /** 发行量 */
    issueQuantityVlidator(rule, value, callback) {
      const regs = /^[+]{0,1}(\d+)$/;
      if (!regs.test(value)) {
        callback(new Error("请输入整数"));
      } else {
        callback();
      }
    }

    couponRules = {
      discount: [{
        required: true,
        message: "折扣不能为空",
        trigger: "blur"
      },
      {
        validator: this.discountValid,
        trigger: "blur"
      },
      ],
      discountAmount: [{
        required: true,
        message: "金额不能为空",
        trigger: "blur"
      },
      {
        validator: this.discountAmountValid,
        trigger: "blur"
      },
      ],
      conditionAmount: [{
        required: true,
        message: "条件不能为空",
        trigger: "blur"
      },
      {
        validator: this.conditionAmountValid,
        trigger: "blur"
      },
      ],
      issueQuantity: [{
        required: true,
        message: "发行量不能为空",
        trigger: "blur"
      },
      {
        validator: this.issueQuantityVlidator,
        trigger: "blur"
      },
      ],
      limitQuantity: [{
        required: true,
        message: "限领量不能为空",
        trigger: "blur"
      },
      {
        validator: this.issueQuantityVlidator,
        trigger: "blur"
      },
      ],
    };

    setModeType() {
      if (this.goodType === 2) {
        this.couponList[0].couponType = 0;
        this.modelList = [{
          id: 0,
          couponType: "无门槛折扣劵",
        }, ];
      } else {
        this.modelList = couponList;
      }
    }

    /**
     * 编辑获得优惠券信息
     */
    getCoupon() {
      const temOption = JSON.parse(JSON.stringify(this.couponContent));
      this.disType = temOption.status === 1 ? true : false;
      this.couponList[0].couponType = temOption.couponType;
      this.couponList[0].discount = temOption.discount + "";
      this.couponList[0].discountAmount = temOption.discountAmount + "";
      this.couponList[0].conditionAmount = temOption.conditionAmount + "";
      this.couponList[0].issueQuantity = temOption.issueQuantity + "";
      this.couponList[0].limitQuantity = temOption.limitQuantity + "";
      this.validType = true;
    }

    /**
     * 选择优惠券
     */
    selectType(e) {
      this.couponList[0].couponType = e;
      this.couponList[0].discount = "";
      this.couponList[0].discountAmount = "";
      this.couponList[0].conditionAmount = "";
      this.couponList[0].issueQuantity = "";
      this.couponList[0].limitQuantity = "";
      this.clearValidate();
    }

    /**
     * 对整个表单进行校验
     */
    validate() {
      return this.couponRef.validate();
    }

    /**
     * 移除表单项的校验结果
     */
    clearValidate() {
      this.couponRef.clearValidate();
    }
}
</script>

<style lang="scss" scoped>
  .addCompent {
    margin-top: 10px;
  }

  @include b(ruleStyle) {
    @include flex(center, center);

    @include e(firIpt) {
      width: 80px;
      margin: 0px 5px;
      margin-top: 15px;
    }

    @include e(secIpt) {
      width: 80px;
      margin: 0px 5px;
      margin-top: 15px;
    }
  }

  .expText {
    font-size: 13px;
    color: rgb(250, 100, 101);
    margin-left: 225px;
  }
</style>